<template>
	<view class="vv">
		<!-- <map name="1"></map> -->
		<map style="width: 100%; height: 80vh;" :latitude="latitude" :longitude="longitude" :markers="markers">
		</map>

		<!-- <button @tap="chooseLocation">选择位置</button> -->

		<!-- <button @tap="sousuo9">搜索附近的酒店</button> -->
		<!-- 店铺列表 -->
		<view class="shop-list">
			<!-- 单个店铺显示 -->
			<view class="shop-item" v-for="(shop, index) in shops" :key="index" @tap="toWashDetail">
				<!-- 显示距离使用父相子绝 -->
				<view class="absolute-child">{{shop.foot}}m</view>
				<!-- 店铺图片 -->
				<image class="shop-image" :src="shop.image" mode="aspectFill" />
				<!-- 店铺信息 -->
				<view class="shop-info">
					<text class="shop-name">{{ shop.name }}</text>
					<view class="rating">
						<text>评分：</text>
						<text class="rating-score">{{ shop.rating }}</text>
					</view>
					<view class="sales">
						<text>销量：</text>
						<text class="sales-num">{{ shop.sales }}</text>
					</view>
					<view class="business-hours">
						<text>营业时间：</text>
						<text>{{ shop.businessHours }}</text>
					</view>
					<view class="address">
						<text>{{ shop.address }}</text>
					</view>
				</view>
			</view>
		</view>
		<view >
			<navigator url="/packageIndex/repair/repairShop/repairShop">
				<button>列表显示</button>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;

	let latitude = ref(0);
	let longitude = ref(0);
	let markers = ref([]);

	function sousuo9() {
		qqmapsdk.search({
			keyword: "加油站",
			// 传递新的位置信息
			location: {
				latitude: latitude.value,
				longitude: longitude.value
			},
			success: (res) => {
				console.log(res);
				var mks = []
				for (var i = 0; i < res.data.length; i++) {
					mks.push({ // 获取返回结果，放到mks数组中
						title: res.data[i].title,
						id: parseInt(res.data[i].id),
						latitude: res.data[i].location.lat,
						longitude: res.data[i].location.lng,
						// iconPath: "/resources/my_marker.png", //图标路径
						width: 20,
						height: 20
					})
				}
				markers.value = mks;
			}
		})
	}

	onMounted(() => {
		// 实例化API核心类
		qqmapsdk = new QQMapWX({
			key: 'KHUBZ-T4ELI-K6FGN-UVXQY-5O6PT-2ABWF'
		});
		// 使用腾讯地图的api

		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);

				//得到附件酒店的图标
				sousuo9();
			}
		});


	})



	//选择位置,可以不用当前所在位置为中心来搜索附件目标
	function chooseLocation() {
		uni.chooseLocation({
			success: (res) => {
				console.log("选择的位置维度" + res.latitude);
				console.log("选择的位置精度" + res.longitude);
				latitude.value = res.latitude;
				longitude.value = res.longitude;

			}
		})
	}


	// 模拟数据
	const shops = ref([{
			id: 1,
			name: '小王汽车美容店',
			rating: '3分',
			sales: '322',
			businessHours: '周一至周五 09:00-22:00',
			address: '山阳区人民中路32号',
			image: '/static/logo.png', // 替换为你的图片路径
			foot: 12,
		},
		{
			id: 2,
			name: '小王汽车美容店',
			rating: '3分',
			sales: '322',
			businessHours: '周一至周五 09:00-22:00',
			address: '山阳区人民中路32号',
			image: '/static/logo.png',
			foot: 12,
		},
		{
			id: 3,
			name: '小王汽车美容店',
			rating: '3分',
			sales: '322',
			businessHours: '周一至周五 09:00-22:00',
			address: '山阳区人民中路32号',
			image: '/static/logo.png',
			foot: 12,
		},
	]);
	
	//调到详情页
	const toWashDetail = ()=>{
		console.log("12")
		uni.navigateTo({
			url:"/packageIndex/car-wash/car-wash"
		})
	}
</script>

<style scoped>
	.vv {
		color: red;
	}
	
	/* 店铺列表样式 */
	.shop-list {
	  display: flex;
	  flex-direction: column;
	  gap: 20rpx;
	}
	
	.shop-item {
	  display: flex;
	  background-color: #ffffff;
	  border-radius: 10rpx;
	  overflow: hidden;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	  
	  /* 相对定位 */
	  position: relative;
	    /* width: 100%;
	    min-height: 300px;
	    border: 2px dashed #666;
	    padding: 20px; */
	}
	
	/* 绝对定位 */
	.absolute-child {
	  position: absolute;
	  bottom: 190rpx;    /* 贴父容器底部 */
	  right: 60rpx;     /* 贴父容器右侧 */
	  padding: 10rpx;
	  color: #1d6fff;
	  border-radius: 4px;
	}
	
	/* 店铺图片样式 */
	.shop-image {
	  width: 200rpx;
	  height: 200rpx;
	}
	
	/* 店铺信息样式 */
	.shop-info {
	  flex: 1;
	  padding: 20rpx;
	}
	
	.shop-name {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 10rpx;
	}
	
	.rating,
	.sales,
	.business-hours,
	.address {
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 10rpx;
	}
	
	.rating-score {
	  color: #ff5722;
	  margin-left: 10rpx;
	}
	
	.sales-num {
	  color: #2196f3;
	  margin-left: 10rpx;
	}
</style>